{% extends "base_generic.html" %}

{% block content %}
<div class="container py-4">
  <header class="mb-4">
    <h1 class="display-4 mb-3">图书馆藏</h1>
    <div class="row align-items-center">
      <div class="col-md-6">
        <p class="lead text-muted">共有 {{ book_list|length }} 本图书</p>
      </div>
      <div class="col-md-6">
        <form class="d-flex" method="get">
          <input class="form-control me-2" type="search" placeholder="搜索图书..." name="q" value="{{ request.GET.q }}">
          <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
        </form>
      </div>
    </div>
  </header>

  {% if book_list %}
  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    {% for book in book_list %}
    <div class="col fade-in">
      <div class="card h-100">
        {% if book.cover_image %}
        <img src="{{ book.cover_image.url }}" class="card-img-top book-cover" alt="{{ book.title }}">
        {% else %}
        <div class="card-img-top book-cover d-flex align-items-center justify-content-center bg-light">
          <i class="fas fa-book fa-3x text-muted"></i>
        </div>
        {% endif %}
        <div class="card-body">
          <h5 class="card-title">
            <a href="{{ book.get_absolute_url }}" class="text-decoration-none">{{ book.title }}</a>
          </h5>
          <h6 class="card-subtitle mb-2 text-muted">
            {% if book.author %}
            <a href="{{ book.author.get_absolute_url }}" class="text-muted text-decoration-none">
              <i class="fas fa-user-edit"></i> {{ book.author }}
            </a>
            {% endif %}
          </h6>
          
          <div class="mb-2">
            {% if book.average_rating %}
            <div class="rating">
              {% for i in "12345"|make_list %}
              {% if forloop.counter <= book.average_rating|floatformat:"0" %}
              <i class="fas fa-star"></i>
              {% else %}
              <i class="far fa-star"></i>
              {% endif %}
              {% endfor %}
              <small class="text-muted">({{ book.bookrating_set.count }}评分)</small>
            </div>
            {% endif %}
          </div>

          <p class="card-text">{{ book.summary|truncatewords:30 }}</p>

          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <a href="{{ book.get_absolute_url }}" class="btn btn-sm btn-outline-primary">
                <i class="fas fa-info-circle"></i> 详情
              </a>
              {% if user.is_authenticated %}
              <button class="btn btn-sm btn-outline-danger favorite-btn" data-book-id="{{ book.id }}">
                <i class="{% if user in book.favorites.all %}fas{% else %}far{% endif %} fa-heart"></i>
                <span class="favorite-count">{{ book.favorites.count }}</span>
              </button>
              {% endif %}
            </div>
            {% if book.price %}
            <small class="text-muted">¥{{ book.price }}</small>
            {% endif %}
          </div>
        </div>
        <div class="card-footer bg-transparent">
          <small class="text-muted">
            <i class="fas fa-tags"></i> 
            {% for genre in book.genre.all %}
            <a href="{% url 'books' %}?genre={{ genre.id }}" class="text-decoration-none">
              <span class="badge bg-secondary">{{ genre.name }}</span>
            </a>
            {% endfor %}
          </small>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="alert alert-info" role="alert">
    <i class="fas fa-info-circle"></i> 暂无图书
  </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const favoriteButtons = document.querySelectorAll('.favorite-btn');
  
  favoriteButtons.forEach(button => {
    button.addEventListener('click', function() {
      const bookId = this.dataset.bookId;
      const icon = this.querySelector('i');
      const countSpan = this.querySelector('.favorite-count');
      
      fetch(`/catalog/book/${bookId}/favorite/`, {
        method: 'POST',
        headers: {
          'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
        },
      })
      .then(response => response.json())
      .then(data => {
        if (data.is_favorite) {
          icon.classList.replace('far', 'fas');
        } else {
          icon.classList.replace('fas', 'far');
        }
        countSpan.textContent = data.favorite_count;
      });
    });
  });
});
</script>
{% endblock %}

